@page "/maps/zooming"

@using Syncfusion.Blazor.Maps
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample depicts the zooming and panning options in the maps. You can customize these options by changing the Zooming, Panning, Mouse wheel zoom, Pinch zoom, Single-click zoom, and Double-click zoom in the Properties panel.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to zoom and pan the map. The support has been provided for zooming with the toolbar, rectangle zoom, pinch zoom, mouse wheel zoom, single-click, and double-click zoom. Panning can be enabled or disabled using the Panning option. When it is disabled, the map will switch to zooming mode.</p>
    <p> More information about zoom can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/user-interactions/#various-types-of-zooming'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <SfMaps>
        <MapsZoomSettings Enable="@ZoomCheckedState" EnablePanning="@PanCheckedState" Toolbars="@ZoomToolbar" ZoomOnClick="SingleClickCheckedState" PinchZooming="@PinchZoomCheckedState"
                          MouseWheelZoom="@MouseWheelCheckedState" DoubleClickZoom="@DoubleClickCheckedState" />
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/world-map.json"}' ShapeDataPath="Continent" TValue="ZoomData"
                       ShapePropertyPath="@ShapePropertyPath" AnimationDuration="@AnimationCheckState" DataSource="@ZoomingDataSource">
                <MapsShapeSettings Autofill="true" ColorValuePath="Color" />
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width:100%" title="Properties">
                <tbody>
                    <tr style="height: 35px">
                        <td style="width: 70%" class="property-text">
                            Zooming
                        </td>
                        <td style="width: 50%">
                            <SfCheckBox Checked="@ZoomCheckedState" ValueChange="@ZoomCheckBox" TChecked="bool" />
                        </td>
                    </tr>
                    <tr style="height: 35px">
                        <td style="width: 70%" class="property-text">
                            Panning
                        </td>
                        <td style="width: 50%">
                            <SfCheckBox Checked="@PanCheckedState" ValueChange="@PanCheckBox" TChecked="bool" />
                        </td>
                    </tr>
                    <tr style="height: 35px">
                        <td style="width: 70%" class="property-text">
                            Mouse Wheel Zoom
                        </td>
                        <td style="width: 50%">
                            <SfCheckBox Checked="@MouseWheelCheckedState" ValueChange="@MouseWheelCheckBox" TChecked="bool" />
                        </td>
                    </tr>
                    <tr style="height: 35px">
                        <td style="width: 70%" class="property-text">
                            Pinch zoom
                        </td>
                        <td style="width: 50%">
                            <SfCheckBox Checked="@PinchZoomCheckedState" ValueChange="@PinchZoomCheckBox" TChecked="bool" />
                        </td>
                    </tr>
                    <tr style="height: 35px">
                        <td style="width: 70%" class="property-text">
                            Single click Zoom
                        </td>
                        <td style="width: 50%">
                            <SfCheckBox Checked="@SingleClickCheckedState" ValueChange="@SingleClickCheckBox" TChecked="bool" Disabled="@SingleClickDisable" />
                        </td>
                    </tr>
                    <tr style="height: 35px">
                        <td style="width: 70%" class="property-text">
                            DoubleClick Zoom
                        </td>
                        <td style="width: 50%">
                            <SfCheckBox Checked="@DoubleClickCheckedState" ValueChange="@DoubleClickCheckBox" TChecked="bool" Disabled="@DoubleClickDisable" />
                        </td>
                    </tr>
                    <tr style="height: 35px">
                        <td style="width: 70%" class="property-text">
                            Animation duration <span style="margin-left:10px;">@AnimationCheckState ms</span>
                        </td>
                        <td style="width: 50%">
                            <SfSlider TValue="double" Value="@AnimationCheckState" Step="250" Min="0" Max="1000" Type=SliderType.MinRange>
                                <SliderEvents TValue="double" ValueChange="AnimationSlider" />
                            </SfSlider>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code {
    public string[] ShapePropertyPath = { "continent" };
    public bool DoubleClickDisable = false;
    public bool SingleClickDisable = false;
    public double AnimationCheckState = 500;
    public bool SingleClickCheckedState = false;
    public string[] ZoomToolbar = new string[] { "Zoom", "ZoomIn", "ZoomOut", "Pan", "Reset" };
    public bool ZoomCheckedState = true;
    public bool PanCheckedState = true;
    public bool MouseWheelCheckedState = true;
    public bool PinchZoomCheckedState = true;
    public bool DoubleClickCheckedState;
    public class ZoomData
    {
        public string Continent { get; set; }
        public string Color { get; set; }
    };
    public List<ZoomData> ZoomingDataSource = new List<ZoomData> {
        new ZoomData { Continent= "Europe", Color= "#EC9B79" },
        new ZoomData { Continent= "Asia", Color= "#7BC1E8" },
        new ZoomData { Continent= "North America", Color= "#B5E485" },
        new ZoomData { Continent= "South America", Color= "#78D0D3" },
        new ZoomData { Continent= "Asia", Color= "#7BC1E8" },
        new ZoomData { Continent= "Australia", Color= "#D6D572" },
        new ZoomData { Continent= "Africa", Color= "#DF819C" }
    };
    private void AnimationSlider(SliderChangeEventArgs<double> args)
    {
        AnimationCheckState = args.Value;
    }
    private void ZoomCheckBox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        ZoomCheckedState = args.Checked;
    }
    private void MouseWheelCheckBox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        MouseWheelCheckedState = args.Checked;
    }
    private void PanCheckBox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        PanCheckedState = args.Checked;
    }
    private void PinchZoomCheckBox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        PinchZoomCheckedState = args.Checked;
    }
    private void SingleClickCheckBox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        SingleClickCheckedState = args.Checked;
        DoubleClickDisable = (SingleClickCheckedState) ? true : false;
    }
    private void DoubleClickCheckBox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        DoubleClickCheckedState = args.Checked;
        SingleClickDisable = (DoubleClickCheckedState) ? true : false;
    }
}